<template>
	<view class="container">
		<view class="banner">
			<text class="banner-title">女神新宠岂止于好</text>
			<text class="banner-description">瑜伽课程包</text>
			<view class="banner-activity">立即开抢 ></view>
		</view>
		<view class="service">
			<view class="service-item" v-for="item in services">
				<image :src="item.imgSrc"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
		<view class="shop">
			<!-- <view class="shop-top">
				<view class="shop-top-buy" :class="TopClassActive" @click="changeNav('buy')">购买</view>
				<view class="shop-top-comment" :class="TopClassDisActive" @click="changeNav('comment')">评价</view>
				<view style="flex:3"></view>
			</view> -->
			<view>

			</view>
			<view class="shop-content">
				<view class="shop-content-nav">
					<view class="shop-content-nav-item" :class="asideClassActive" v-for="item in categoryList"
						@click="initShop(item.id)">
						{{item.name}}
					</view>
				</view>
				<view class="shop-content-shop">
					<view v-if="shopList!=null">
						<view class="shop-content-shop-item" v-for="item in shopList" @click="shopDetail(item)" >
							<view class="shop-content-shop-item-image">
								<image :src="item.image"></image>
							</view>
							<view class="shop-content-shop-item-right">
								<view class="shop-content-shop-item-shopName">
									{{item.shopName}}
								</view>
								<view class="shop-content-shop-item-description">
									{{item.description}}
								</view>
								<view class="shop-content-shop-item-price">
									<view class="shop-content-shop-item-oldPrice">
										<view v-if="item.oldPrice!=null">
											{{item.oldPrice}}¥
										</view>
										<view v-else class="shop-content-shop-item-oldPrice">
											最新价
										</view>
									</view>
									<view class="shop-content-shop-item-newPrice">
										{{item.newPrice}}¥
										<view v-if="item.status==1" class="shop-content-shop-item-buy">
											购买
										</view>
										<view v-else class="shop-content-shop-item-disBuyed">
											停售
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCardList
	} from '../../api/card'
	import {
		getCategoryList
	} from '../../api/category'
	import {
		getShopByCategoryId,
	} from '../../api/shop'
	import {
		baseUrl
	} from '../../config'
	export default {
		data() {
			return {
				services: [{
					imgSrc: "/static/img2/cardApplication.png",
					text: "办卡",
					url: "/cardApplication"
				}, {
					imgSrc: "/static/img2/coursePackage.png",
					text: "课程包",
					url: "/cardApplication"
				}, {
					imgSrc: "/static/img2/commodity.png",
					text: "商品",
					url: "/cardApplication"
				}, {
					imgSrc: "/static/img2/exchange.png",
					text: "积分兑换",
					url: "/cardApplication"
				}],
				categoryList: [],
				shopList: [],
				TopClassActive: "topClassActive",
				TopClassDisActive: "topClassDisActive",

			}

		},
		methods: {
			changeNav(val) {
				if (val == 'buy') {
					this.TopClassActive = 'topClassActive'
					this.TopClassDisActive = 'topClassDisActive'
				} else {
					this.TopClassActive = "topClassDisActive"
					this.TopClassDisActive = 'topClassActive'
				}
			},
			initShop(categoryId) {
				getShopByCategoryId(categoryId).then(res => {
					console.log(res);
					this.shopList = res.data.data
					for (var i = 0; i < res.data.data.length; i++) {
						res.data.data[i].image=baseUrl+"/common/download?name="+res.data.data[i].image
					}
					if(res.data.data.length==0){
						uni.showToast({
							title:"暂无更多商品",
							duration:2000,
							icon:"error"
						})
					}
				})
			},
			shopDetail(item){
				if(item.status==0){
					uni.showToast({
						title:"商品已停售",
						icon:"error"
					})
				}else{
					uni.navigateTo({
					url:"/pages/detail/shopDetail?id="+item.id
				})
				}
				
			}
		},
		onLoad() {
			getCategoryList().then(res => {
				console.log(res);
				this.categoryList = res.data.data
				this.initShop(res.data.data[0].id)
			})


		}
	}
</script>

<style>
	.topClassActive {
		background-color: whitesmoke;
		border-radius: 1vh;
	}

	.topClassDisActive {
		background-color: #98C057;
	}

	.container {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.container text {

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.banner {
		background-image: url(/static/img2/banner.jpg);
		width: 100%;
		background-size: 100%;
		height: 34vh;
		background-repeat: no-repeat;
		background-color: red;
		position: relative;
		z-index: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.banner-title {
		position: absolute;
		color: #F83448;
		font-weight: bold;
		font-size: 3vh;
		top: 8vh;
		right: 1vh;
		text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white, 1.4px 1.4px white, 1.4px -1.4px white, -1.4px 1.4px white, -1.4px -1.4px white;
	}

	.banner-description {
		position: absolute;
		top: 14vh;
		right: 12vh;
		color: #000;
		font-weight: bold;
		text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white, 1.4px 1.4px white, 1.4px -1.4px white, -1.4px 1.4px white, -1.4px -1.4px white;
		white-space: nowrap;
		overflow: hidden;

	}

	.banner-activity {
		position: absolute;
		border-radius: 2vh;
		width: 12vh;
		text-align: center;
		background-color: #F83448;
		color: white;
		padding: 0.4vh;
		top: 19vh;
		right: 11vh;

	}

	.service {
		width: 90%;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		z-index: 2;
		position: absolute;
		height: 10vh;

		top: 30%;
		border-radius: 2vh;
		padding-top: 2vh;

	}

	.service-item {
		text-align: center;

	}

	.service-item image {
		width: 6vh;
		height: 6vh;
	}

	.hot {
		display: flex;
		position: absolute;
		width: 90%;
		top: 45%;
		background-color: white;
		justify-content: center;
		height: 25%;
		border-radius: 2vh;
	}

	.hot-banner {
		display: flex;
		/* justify-content: space-between; */
		position: absolute;
		top: 1.5vh;
		height: 5vh;
		width: 90%;
	}

	.hot-title {
		position: absolute;
		left: vh;
		font-weight: bold;
	}

	.hot-more {
		position: absolute;
		right: 0.5vh;
	}

	.hot-item {
		height: 20vh;
		background-color: red;
		z-index: 2;
		white-space: nowrap;
		width: 100%;
	}

	.hot-card {
		width: 90%;
		height: 10vh;
		position: absolute;
		top: 6vh;
	}

	.hot-card-item image {
		display: flex;
		width: 100%;
		height: 10vh;
		margin-right: 1vh;
		border-radius: 1vh;

	}

	.hot-card-item-cardName {
		margin: 1vh 0;
	}

	.hot-card-item-price {
		color: red;
		font-weight: bold;
	}

	.shop {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 10vh;
		background-color: #FFFFFF;
	}

	.shop-top {
		font-size: 4vh;
		display: flex;
		box-sizing: content-box;
		padding: 1vh;

		color: #000;
		background-color: #98C057;
		width: 1;
		flex: 1;
		text-align: center;
		text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white, 1.4px 1.4px white, 1.4px -1.4px white, -1.4px 1.4px white, -1.4px -1.4px white;
		white-space: nowrap;
		overflow: hidden;
	}

	.shop-top-buy {
		flex: 1;
		margin-right: 2vh;

	}

	.shop-content {
		display: flex;
		flex: 1;
	}

	.shop-content-nav {
		font-size: 2vh;
		text-align: center;
		flex: 0 0 10vh;
	}

	.shop-content-nav-item {
		height: 6vh;
		line-height: 6vh;
	}

	.shop-content-shop {
		flex: 1;


	}

	.shop-content-shop-item {

		/* background-color: antiquewhite; */
		display: flex;
		margin-bottom: 2vh;
		margin: 4vh auto;
		border-radius: 2vh;
	}

	.shop-content-shop-item-right {
		flex: 3;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 2vh 2vh 2vh 0;

	}

	.shop-content-shop-item-image {
		width: 20vh;
		height: 15vh;
		margin: 2vh;
		flex: 2;
	}

	.shop-content-shop-item-image image {
		border-radius: 2vh;
		width: 100%;
		height: 100%;
	}

	.shop-content-shop-item-shopName {
		flex: 1;
		width: 100%;
		font-size: 2vh;
		/* 超出文本隐藏显示省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-height: 4vh;
	}

	.shop-content-shop-item-description {
		flex: 1;
		line-height: 4vh;
		font-weight: bold;
		font-size: 1.5vh;
		color: darkgray;
	}

	.shop-content-shop-item-price {
		flex: 4;
		line-height: 4vh;
	}

	.shop-content-shop-item-oldPrice {
		font-size: 1.7vh;
		color: darkgray;
		font-weight: bold;
		color: red;
	}

	.shop-content-shop-item-newPrice {
		font-size: 2.5vh;
		color: orangered;
		display: flex;
		

	}

	.shop-content-shop-item-buy {
		flex: 2;
		margin-left: 2vh;
		text-align: right;
		
	}
	.shop-content-shop-item-disBuyed{
		flex: 2;
		margin-left: 2vh;
		text-align: right;
		color: gray;
	}
</style>